<!--
 * @name: 
 * @test: test font
 * @msg: 
 * @param: 
 * @return: 
-->
<template>
	<view class="appBox">
		<view class="first-bg">
			<view class="content">
				<view class="ewm">
					<canvas canvas-id="qrcode" style="width:150px; height:150px;position: relative;
    left: 8px;"></canvas>
				</view>
				<text class="txt">邀请码：{{ inviteCode }}</text>
			</view>
			<text class="scan">扫一扫，快速申请加入</text>
		</view>
		<view class="bottom">
			<view class="b-item" @click="onCopy()">
				<image class="img" src="/static/images/link.png" mode=""></image>
				<text class="txt"  >复制链接</text>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="b-item" @click="saveImage" style="margin-left:40px;">
				<image class="img" src="/static/images/file.png" mode=""></image>
				<text class="txt">保存二维码</text>
			</view>
			<!-- #endif -->
		
		</view>
	</view>
</template>
 

<script>
	import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
	import store from "@/store/index.js"   
	export default {
		data() { 
			inviteCode: ''
		},
		created() {
			console.log("store.state.app.userInfo",store.state.app.userInfo)
			this.inviteCode = store.state.app.userInfo.inviteCode 
		},
		mounted() { 
			this.qrFun(this.$config.invite_url+"?inviteCode="+this.inviteCode)
		},
		methods: {
			 onCopy() { //复制内容
			  uni.setClipboardData({
			  	data: this.$config.invite_url+"?inviteCode="+this.inviteCode,
			  	success: function () {
			  		console.log('success');
			  	}
			  });
			 },
			saveImage(){
			 const that = this 
			        uni.canvasToTempFilePath({
			          canvasId: 'qrcode',
			          success: function(res) {
			            const tempFilePath = res.tempFilePath
			            uni.saveImageToPhotosAlbum({
			              filePath: tempFilePath,
			              success: function() {
			                uni.showToast({
			                  title: '保存成功',
			                  icon: 'success',
			                  duration: 2000
			                })
			              },
			              fail: function(err) {
			                console.log('保存失败：', err)
			              }
			            })
			          },
			          fail: function(err) {
			            console.log('转换失败：', err)
			          }
			        })  
			},
			//**生成二维码**//
			qrFun(text) {
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text, //这里的text需要生成的二维码地址
					size: 150, //和上面保持一致即可默认像素
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel,
					success: res => {

					}
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.appBox {
		background-color: $theme-color;
		height: 100%;
		padding: 16rpx 33rpx;

		.first-bg {
			position: relative;
			height: 854rpx;
			background: url('/static/images/inv-bg.png')no-repeat;
			background-size: 100% 100%;
			margin-top: 188rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.content {
				text-align: center;

				.ewm {
					// background: pink;
					width: 333rpx;
					height: 333rpx;
				}

				.txt {
					font-family: SourceHanSansCN-Regular;
					font-size: 28rpx;
					color: #606266;
					line-height: 34px;
					display: inline-block;
					margin-top: 21rpx;
				}


			}

			.scan {
				position: absolute;
				bottom: 125rpx;
				font-family: SourceHanSansCN-Regular;
				font-size: 26rpx;
				color: #909399;
				line-height: 31px;
				
			}
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: center;

			.b-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				font-family: SourceHanSansCN-Regular;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 74rpx;

				.img {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 12rpx;
				}
			}
		
		}

	}


	page {
		background-color: #fff !important;
	}
</style>
